<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>自适应卡片UI设计</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				font-family: 'Poppins', sans-serif;
				background: #070c24;
			}
			.container {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 900px;
				height: 600px;
				background: #fff;
				margin: 20px;
			}
			.container .imgBx {
				position: relative;
				display: flex;
				justify-content: center;
				align-content: center;
				width: 50%;
				height: 100%;
				background: #006dbc;
			}

			.container .imgBx::before {
				content: 'Nike';
				position: absolute;
				top: 20px;
				left: 20px;
				color: #000;
				opacity: 0.1;
				font-size: 8em;
				font-weight: 800;
			}

			.container .imgBx img {
				position: relative;
				width: 700px;
				left: -50px;
				transform: rotate(-30deg);
			}
			.container .details {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 100%;
				box-sizing: border-box;
				padding: 40px;
			}

			.container .details h2 {
				margin: 0;
				padding: 0;
				font-size: 2.5em;
				line-height: 0.8em;
				color: #444;
			}

			.container .details h2 span {
				font-size: 0.4em;
				text-transform: uppercase;
				letter-spacing: 2px;
				color: #999;
			}
			.container .details p {
				max-width: 85%;
				margin-left: 10%;
				color: #333;
				font-size: 15px;
			}
			.container .details h3 {
				margin: 0;
				padding: 0;
				font-size: 2.5em;
				color: #a2a2a2;
				float: left;
			}

			.container .details button {
				background: #006dbc;
				color: #fff;
				border: none;
				box-shadow: none;
				outline: none;
				padding: 15px 20px;
				margin-top: 5px;
				font-size: 16px;
				letter-spacing: 1px;
				text-transform: uppercase;
				font-weight: 600;
				border-radius: 40px;
				float: right;
				cursor: pointer;
			}

			@media (max-width: 1080px) {
				.container {
					height: auto;
				}
				.container .imgBx {
					padding: 40px;
					box-sizing: border-box;
					width: 100% !important;
					height: auto;
					text-align: center;
					overflow: hidden;
				}
				.container .imgBx img {
					left: initial;
					max-width: 100%;
					height: 90%;
					transform: rotate(0deg);
				}
				.details {
					width: 100% !important;
					height: auto;
					padding: 20px;
				}
				.container .details p {
					max-width: 100%;
					margin-left: 0;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="imgBx">
				<img src="../images/下载.png" alt="" />
			</div>
			<div class="details">
				<div class="content">
					<h2>Nike Air Max 270<br /><span>Runing Collection</span></h2>
					<p>
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo natus ipsum praesentium explicabo
						nesciunt consequatur ea error similique cum non doloribus quis libero quam rem, cumque
						aspernatur provident quibusdam deleniti?Lorem ipsum dolor, sit amet consectetur adipisicing
						elit. Nihil, vero totam maiores error excepturi optio delectus sequi aspernatur tenetur tempora
						amet harum at ullam dolore quas consequuntur magni laboriosam laudantium?Lorem ipsum dolor sit
						itaque, nisi rerum accusantium quae officia nesciunt vero ex libero veniam quod corporis atque.
					</p>
					<h3>$150.99</h3>
					<button>Buy now</button>
				</div>
			</div>
		</div>
	</body>
</html>
